<template>
	<view class="mine">
		<button class="user noLogin" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="!phone">
			<text class="name">登录</text>
			<uni-icons class="avatar" type="contact" size="60" color="#999"></uni-icons>
		</button>
		<view class="user" v-else>
			<view style="display: flex;flex-direction: column;">
				<view class="name">
					<open-data type="userNickName"></open-data>
					({{work}})
				</view>
				<text class="phone">{{phone}}</text>
			</view>
			<open-data type="userAvatarUrl" class="avatar"></open-data>
		</view>
		<view class="line"></view>
		<view class="list">
			<uni-list :border="false" class="listItem" v-if="userFlag === 'true'">
				<uni-list-item :show-extra-icon="true" :extra-icon="{
					color: '#3b4144',
					size: '24',
					type: 'person'
				}" title="人员管理" link to="/pages/userControl/userControl"></uni-list-item>
			</uni-list>
			<view v-if="userType==='1' || userType==='3' || userType==='4' || userType==='6'">
				<uni-list :border="false" class="listItem">
					<uni-list-item :show-extra-icon="true" :extra-icon="{
						color: '#3b4144',
						size: '24',
						type: 'home'
					}" title="当前库存" link to="/pages/inventory/inventory"></uni-list-item>
				</uni-list>
				<uni-list :border="false" class="listItem">
					<uni-list-item :show-extra-icon="true" :extra-icon="{
						color: '#3b4144',
						size: '24',
						type: 'home-filled'
					}" title="历史库存" link to="/pages/inventory/inventoryHistory"></uni-list-item>
				</uni-list>
				<uni-list :border="false" class="listItem">
					<uni-list-item :show-extra-icon="true" :extra-icon="{
						color: '#3b4144',
						size: '24',
						type: 'list'
					}" title="库存变更记录" link to="/pages/inventory/inventoryRecord"></uni-list-item>
				</uni-list>
			</view>
		</view>
	</view>
</template>

<script>
	const obj = {
		"0": "业务员",
		"1": "财务",
		"2": "配送员",
		"3": "仓储",
		"4": "专卖店",
		"5": "VIP",
		"6": "管理者",
		"7": "配送负责人",
	}
	export default {
		name: "Mine",
		data() {
			return {
				loginCode: ""
			}
		},
		computed: {
			work() {
				return obj[this.userType]
			}
		},
		created() {
			if (!this.phone) {
				wx.login({
					success: (res) => {
						if (res.code) {
							this.loginCode = res.code
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			}
		},
		methods: {
			/* subscribe() {
				wx.requestSubscribeMessage({
					tmplIds: ['JzJuRvoBVyjJUpGsN2-123xqxCzL0u54QWDZfken3co'],
					success: (res) => {
						console.log(res)
					}
				})
			}, */
			async getPhoneNumber(e) {
				try {
					const {
						data
					} = await this.request("login", {
						jsCode: this.loginCode,
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData
					})

					this.phone = data.phone
					this.userType = data.type
					this.userFlag = data.flag

					// 缓存用户手机号
					uni.setStorageSync("phone", this.phone)
					// 缓存用户身份
					uni.setStorageSync("userType", this.userType)
					// 缓存人员管理权限
					uni.setStorageSync("userFlag", this.userFlag)
				} catch (e) {
					uni.showToast({
						title: "网络不太好，请稍后再试"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
		padding: 50rpx 0;

		.noLogin {
			line-height: 120rpx;
		}

		.user {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 120rpx;
			padding: 0 40rpx;
			margin-bottom: 40rpx;
			border: none;
			outline: none;
			background: #fff;

			/* 去除按钮边框 */
			&::after {
				border: none;
			}

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.name {
				display: inline-block;
				font-size: 42rpx;
				font-weight: 600;
				color: #999999;
			}

			.phone {
				display: inline-block;
				margin-top: 20rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: #999999;
			}
		}

		.line {
			display: block;
			height: 30rpx;
			background: #eee;
		}

		.list {
			/deep/ .uni-list-item {
				padding: 0 30rpx;
				border-bottom: 1px solid #eee;
			}
		}
	}
</style>
